import {productMessages} from "../goods.js";
export let name = "product-buycar-page";
export function Render(){
    return`
<style>
.buyDiv{
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 1000;
    }
    .buyDiv .goodsContent{
    width: 100%;
    height: 32%;
    background-color: white;
    border-radius: 3rem 3rem 0 0;
    position: fixed;
    bottom: 0;
    left: 0;
    padding: 2rem;
    overflow: auto;
    }
    .goodsContent .goods-message{
    width: 100%;
    margin-top: 3rem;
    }
    .buyDiv .backGround{
    height: 68%;
    }
    .buyDiv .goodsContent img{
    border: 0.1rem solid #999;
    border-radius: 2rem;
    width: 17rem;
    }
    .goodsText{
    width: 65%;
    margin-top: 1rem;
    margin-right: 1rem;
    }
    .purchasedQuantity{
    width: 100%;
    }
    .goodsText p{
    font-size: 2.5rem;
    display: -webkit-box;      
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;  
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 3.5rem;
    margin-bottom: 3rem;
    
    }
    .goodsText span{
    font-size: 3.6rem;
    color: red;
    }
.purchasedQuantity {
    width: 100%;
    margin-top: 4rem;
    margin-left: 1rem;
    height: 5rem;
    line-height: 5rem;
    }
    .purchasedQuantity span{
    font-size: 3rem;
    }
    .purchasedQuantity input{
    font-size: 2rem;
    float: right;
    height: 100%;
    width: 5rem;
    }
    .purchasedQuantity .quantity{
    width: 10%;
    margin: 0 1rem;
    border: none;
    padding-left: 1.8rem;
    }
    .purchasedQuantity input[type='button']{
    border-radius: 5rem;
    background-color: #2aae67;
    font-size: 4rem;
    color: #fff;
    }
    .purchasedQuantity input:nth-child(4){
    background-color: silver;
    }
.buyBtn{
    width: 100%;
    height: 8rem;
    background-color: white;
    position: fixed;
    bottom: 0;
    left: 0;
    }
    .buyBtn input{
    width: 45%;
    height: 7rem;
    float: left;
    font-size: 3rem;
    line-height: 7rem;
    }
    .buyBtn input:nth-child(1){
    background: rgba(42, 174, 103, .2);
    color: #2aae67;
    border-radius: 7rem 0 0 7rem;
    margin-left: 3.2rem;
    }
    .buyBtn input:nth-child(2){
    background: linear-gradient(90deg, #2aae67 ,rgba(42, 174, 103, .6));
    color: #fff;
    border-radius: 0 7rem 7rem 0;
    }
</style>
    <!--加入购物车/购买页面-->
<div class="buyDiv " style="display: none">
    <div class="backGround"></div>
    <div class="goodsContent  ">
        <div class="goods-message clearfix">
            <div class="goodsText right">
               
            </div>
            <div class="purchasedQuantity clearfix">
                    <span>购买数量</span>
                    <input type="button" value="+" class="add">
                    <input type="text" class="quantity" value="1">
                    <input type="button" value="-" class="subtract">
            </div>
            <div class="buyBtn clearfix">
                <input type="button" value="加入购物车">
                <input type="button" value="立即购买">
            </div>
        </div>
        
    </div>
</div>
    `
}
export function afterRender(){
    let hash = location.hash.slice(1);
    //动态渲染购物车参数
    let goodsmessage = document.querySelector(".goods-message");
    let goodsText = document.querySelector(".goodsText");
    let imgcar  = document.createElement("img");
    imgcar.src = `${productMessages[hash].src}` ;
    goodsmessage.insertBefore(imgcar,goodsText);
    let buyButton = document.querySelectorAll(".action-bar button");
    let buyDiv = document.querySelector(".buyDiv");
    buyButton.forEach(function (item) {
        item.addEventListener("click", function () {
            buyDiv.style.display = "block";
        })
    })
    goodsText.innerHTML = `
    <p>${productMessages[hash].text}</p>
    <span>￥${productMessages[hash].price}</span>
    `
//加减功能
    let addButton = document.querySelector(".add");
    let substractBtn = document.querySelector(".subtract");
    let quantity = document.querySelector(".quantity");
    addButton.addEventListener("click", function () {
        substractBtn.style.backgroundColor = "#2aae67";
        quantity.value++;
    });
    substractBtn.addEventListener("click", function () {
        if (quantity.value > 1) {
            quantity.value--;
        } else {
            substractBtn.style.backgroundColor = "silver";
        }
    })
//点击立即购买 跳转到确认订单页面
    let confirm = document.querySelector("input[value='立即购买']");
    confirm.addEventListener("click", function () {
        location.hash = "/goods/order";
    })
}